<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/favicon.ico">
  <link rel="icon" type="image/png" href="./favicon.ico">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>Anchor Bootstrap 4.1.3 UI Kit by WowThemesNet</title>
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
    name='viewport' />

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,800" rel="stylesheet">

  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
    integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

  <!-- Main CSS -->
  <link href="../assets/css/main.css" rel="stylesheet" />

  <!-- Animation CSS -->
  <link href="../assets/css/vendor/aos.css" rel="stylesheet" />

  <style>
    .animate__fadeInDown {
      --animate-duration: 2s
    }
  </style>
</head>

<body>
  <div style="position:fixed; bottom:20px;left:20px;">
    <a href="./project_index.html" target="_blank"><img class="rounded-circle shadow-lg"
        src="../assets/img/demo/coffee.png" width="70" data-toggle="tooltip" data-placement="top" title=""
        data-original-title="Buy me a coffee!"></a>
  </div>
  <!-- navbar dark -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-danger">
    <div class="container">
      <a class="navbar-brand" href="#"><i class="fas fa-anchor mr-2"></i><strong>Vehicle management</strong></a><button
        class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-1"
        aria-controls="navbarNavDropdown-1" aria-expanded="false" aria-label="Toggle navigation" style=""><span
          class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown-1">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active"><a class="nav-link" href="./project_index.html">神领物流 <span
                class="sr-only">(current)</span></a></li>

          <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="https://wowthemes.net"
              id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">车辆管理</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="./project_carModel.html">车型管理</a>
              <a class="dropdown-item" href="./project_car.html">车辆管理</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <header>
    <div class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-5  bg-danger position-relative">
      <div class="container-fluid text-white h-100">
        <div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5">
          <div class="col pt-4 pb-4">
            <h1 class="display-3">神领物流 <strong>车辆管理</strong> &amp; 小组五</h1>
            <h5 class="font-weight-light mb-4">With this FREE Bootstrap 4.1.3<strong> UI Kit</strong> &amp; <strong><i
                  class="fab fa-sass fa-2x"></i></strong></h5>
          </div>
          <div class="col align-self-bottom align-items-right text-right">
            <img src="../assets/img/demo/dashb2.png" class="rounded img-fluid">
          </div>
        </div>
      </div>
    </div>
    <svg
      style="-webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg); margin-top: -1px;"
      version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
      y="0px" viewBox="0 0 1440 126" xml:space="preserve">
      <path class=" bg-danger" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z">
      </path>
    </svg>
  </header>

  <!-- 滚动图片 -->
  <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel"
    style="width: 70%; margin: 0 auto;">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner shadow-sm rounded">
      <div class="carousel-item active">
        <img class="d-block w-100" src="../img/CarList.png" alt="First slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>Mountains, Nature Collection</h5>
        </div>
      </div>
      <div class="carousel-item ">
        <img class="d-block w-100" src="../img/Carxq.png" alt="Second slide">
        <div class="carousel-caption d-none d-md-block">
          <!-- <h5>Freedom, Sea Collection</h5> -->
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="../img/UserManager.png" alt="Third slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>Living the Dream, Lost Island</h5>
        </div>
      </div>
    </div>
  </div>

  <!-- Call to action -->
  <div class="jumbotron p-5 jumbotron-fluid bg-danger ">
    <!-- 任务描述 -->
    <span class="badge badge-pill badge-secondary"
      style="font-size: 20px; padding:10px 15px; font-weight: 300; margin-left: 450px; border-radius: 15px;">任务描述
      :</span>
    <div class="container text-center h-100">
      <h5 class="font-weight-light mb-4 " style="color: white;">
        1.新增车辆 &nbsp;&nbsp;&nbsp; 提示框显示的时候使用接口，获取车辆类型

      </h5>
      <h5 class="font-weight-light mb-4 " style="color: white;">
        2.查看详情 &nbsp;&nbsp;&nbsp; 点击详情跳转到车辆详情页，进行数据修改
      </h5>
      <!-- button triggering modal -->
      <a href="#" class="btn btn-lg btn-secondary animate__rubberBand" data-toggle="modal"
        data-target="#exampleModalCenter" style="margin-bottom: 30px; ">Call to action</a>
      <!-- The modal itself -->
      <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header border-0">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="pb-4 pr-4 pl-4 text-center">
                <img src="../img/carDialog.png" style="height: 70%">
                <img src="../img/Carxqx.png">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 技术 -->
    <span class="badge badge-pill badge-secondary animate__fadeInDown"
      style="font-size: 20px; padding:10px 15px; font-weight: 300; margin-left: 450px; border-radius: 15px;">技术 :</span>
    <div class="container text-center h-100" style="margin-bottom: 30px;">
      <h5 class="font-weight-light mb-4 " style="color: white;">
        vue admin template + vue 全家桶 + axios + elementUI

      </h5>
    </div>
    <!-- 任务实现 -->
    <span class="badge badge-pill badge-secondary"
      style="font-size: 20px; padding:10px 15px; font-weight: 300; margin-left: 450px; border-radius: 15px;">任务实现
      :</span>
    <div class="container text-center h-100" style="margin-bottom: 30px;">
      <h5 class="font-weight-light mb-4 " style="color: white;">
        实现对车辆进行 增加 修改 查看详情 车辆状态 停用 启用等一些功能
      </h5>
      <!-- Author Card -->
      <div style="margin-bottom: 20px;">
        <h5 class="font-weight-light mb-4 " style="color: white; font-size: 15px;">1.根据接口返回数据判断车辆状态和启用或停用</h5>
        <img class="card-img-top" src="../img/stopStart.png" style="width: 80%; margin: 0 auto;">
      </div>
      <div style="margin-bottom: 20px;">
        <h5 class="font-weight-light mb-4 " style="color: white; font-size: 15px;">2.点击配置司机打开dialog框，并渲染司机信息</h5>
        <img class="card-img-top" src="../img/driverPz.png" style="width: 40%; margin: 0 auto;">
      </div>

    </div>

  </div>


  <!-- footer -->
  <!-- dark footer -->
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
    y="0px" viewBox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
    <path class="bg-black" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"
      style="margin-top: 200px;">
    </path>
  </svg>
  <footer class="bg-black pb-5">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md mr-4">
          <i class="fas fa-copyright text-white"></i>
          <small class="d-block mt-3 mb-3 text-muted">© 车辆管理模块</small>
        </div>
        <div class="col-6 col-md">
          <h5 class="mb-4 text-white">模块制作</h5>
          <ul class="list-unstyled text-small">
            <li><a class="text-muted" href="#">陈一帆</a></li>
          </ul>
        </div>
        <div class="col-6 col-md">
          <h5 class="mb-4 text-white">材料制作</h5>
          <ul class="list-unstyled text-small">
            <li style="font-weight: 900"><a class="text-muted" href="#">陈一帆</a></li>
          </ul>
        </div>
      </div>
  </footer>

  <script src="../assets/js/vendor/jquery.min.js" type="text/javascript"></script>
  <script src="../assets/js/vendor/popper.min.js" type="text/javascript"></script>
  <script src="../assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
  <script src="../assets/js/functions.js" type="text/javascript"></script>

  <!-- Animation -->
  <script src="../assets/js/vendor/aos.js" type="text/javascript"></script>
</body>

</html>